import React, { useState } from 'react';
import { Tabs, Pagination, Card, Button } from 'antd';
import type { TabsProps } from 'antd';
import './Teacher.css';

// 导入多张本地图片
import c1Image from '/Mark/c7.jpg';
import c2Image from '/Mark/c8.jpg';
import c3Image from '/Mark/c6.jpg';
import c4Image from '/Mark/c5.jpg';
import c5Image from '/Mark/c4.jpg';
import c6Image from '/Mark/c1.jpg';
import c7Image from '/Mark/c2.jpg';
import c11Image from '/Mark/c3.jpg';
// 定义海报数据类型
interface Poster {
  id: number;
  type: '海报' | 'H5' 
  image: string; // 海报图片路径
}

const Marketing: React.FC = () => {
  // 标签项配置
  const tabItems: TabsProps['items'] = [
    { key: '插画', label: '秋日营销插画' },

  ];

  // 海报数据 - 包含海报元素信息和图片路径
  const allPosters: Poster[] = [
    {
        id: 0,
        image: c1Image,
        type: '海报'
    },
    {
        id: 1,
        image: c2Image,
        type: '海报'
    },
    {
        id: 2,
        image: c3Image,
        type: '海报'
    },
    {
        id: 3,
        image: c4Image,
        type: '海报'
    },
    { 
      id: 4, 
      type: '海报', 
      image: c5Image
    },
    { 
      id: 5, 
      type: '海报', 
      image: c6Image
    },
     { 
      id: 6, 
      type: '海报', 
      image: c7Image
    },
    { 
      id: 7, 
      type: '海报', 
      image: c11Image
    },
  ];

  const [activeTab, setActiveTab] = useState<string>('海报');
  const [currentPage, setCurrentPage] = useState(1);
  const pageSize = 8;
  
  // 处理标签切换
  const handleTabChange = (key: string) => {
    setActiveTab(key);
    setCurrentPage(1);
  };

  // 处理分页变化
  const handlePageChange = (page: number) => {
    setCurrentPage(page);
  };

  // 获取当前标签的海报数据
  const currentTabData = allPosters.filter(poster => poster.type === activeTab);
  
  // 当前页显示的海报数据
  const currentPageData = currentTabData.slice(
    (currentPage - 1) * pageSize,
    currentPage * pageSize
  );

  return (
    <div className="app">
      {/* 顶部标题 */}
      <header className="header">
        <h1>专题页面</h1>
        <div className="subtitle">Dragon Boat Festival</div>
      </header>

      {/* 标签导航 */}
      <div className="tab-container">
        <Tabs
          activeKey={activeTab}
          items={tabItems}
          onChange={handleTabChange}
          centered
        />
      </div>

      {/* 海报展示区 - 使用本地图片 */}
      <div className="poster-grid">
        {currentPageData.length > 0 ? (
          currentPageData.map(poster => (
            <Card key={poster.id} className="poster-card">
              {/* 海报预览区域 */}
              <div className="poster-preview">
                {/* 海报图片 */}
                <img 
                  src={poster.image} 
                  className="poster-image"
                />
                
                {/* 遮罩层（悬停时显示） */}
                <div className="hover-overlay">
                  <Button type="primary" className="download-btn">
                    免费下载
                  </Button>
                </div>
              </div>
            </Card>
          ))
        ) : (
          <div className="no-data">
            <div className="dragon-boat-icon" />
            <p>当前分类暂无内容</p>
          </div>
        )}
      </div>

      {/* 分页器 */}
      {currentTabData.length > 0 && (
        <div className="pagination-container">
          <Pagination
            current={currentPage}
            pageSize={pageSize}
            total={currentTabData.length}
            onChange={handlePageChange}
            showSizeChanger={false}
          />
        </div>
      )}
    </div>
  );
};

export default Marketing;